/* 汽泡区 */
.twui-bubblebox {
  position: relative;
}

@keyframes bubble {
  50% { transform: scale(0.95); }
}

/* 汽泡 */
.twui-bubble {
  position: absolute;
  color: #fff;
  text-align: center;
  cursor: pointer;

  &:before {
    content: "";
    position: absolute;
    width: 134%;
    height: 134%;
    left: -17%;
    top: -17%;
    animation: bubble 1s ease-in-out .6s infinite;
    border-radius: 50%;
    opacity: 0.5;
  }
}

.twui-bubble.xselected {
  &:before {
    animation: none;
  }
}

.twui-bubble-inner {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  white-space: nowrap;

  &:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
}

.twui-bubble-textbox {
  display: inline-block;
  padding: 0 8px;
  white-space: normal;
  vertical-align: middle;
}

// 汽泡1
.twui-bubble.xb1 {
  top: calc(35% - 50px);
  left: calc(39% - 50px);
  width: 100px;
  height: 100px;
  font-size: 16px;

  &:before {
    background: #ffc629;
    opacity: 0.2;
  }

  > .twui-bubble-inner {
    background-color: #ff771c;
    background-image: linear-gradient(to top, #ffc629, #ff771c);
  }
}

// 汽泡2
.twui-bubble.xb2 {
  top: calc(48% - 40px);
  left: calc(86% - 40px);
  width: 80px;
  height: 80px;
  font-size: 20px;

  &:before {
    animation-delay: 30ms;
    background: #45e67c;
    opacity: 0.2;
  }

  > .twui-bubble-inner {
    background-color: #07c3c4;
    background-image: linear-gradient(to top, #45e67c, #07c3c4);
  }
}

// 汽泡3
.twui-bubble.xb3 {
  top: calc(25% - 45px);
  left: calc(15% - 45px);
  width: 90px;
  height: 90px;
  font-size: 16px;

  &:before {
    animation-delay: 60ms;
    background: #599afe;
    opacity: 0.2;
  }

  > .twui-bubble-inner {
    background-color: #5562ff;
    background-image: linear-gradient(to top, #599afe, #5562ff);
  }
}

// 汽泡4
.twui-bubble.xb4 {
  top: calc(29% - 50px);
  left: calc(66% - 50px);
  width: 100px;
  height: 100px;
  font-size: 16px;

  &:before {
    background: #57ceff;
    opacity: 0.2;
  }

  > .twui-bubble-inner {
    background-color: #0392ff;
    background-image: linear-gradient(to top, #57ceff, #0392ff);
  }
}

// 汽泡5
.twui-bubble.xb5 {
  bottom: 11%;
  left: 17%;
  width: 90px;
  height: 90px;
  font-size: 18px;

  &:before {
    animation-delay: 30ms;
    background: #45e67c;
    opacity: 0.2;
  }

  > .twui-bubble-inner {
    background-color: #07c3c4;
    background-image: linear-gradient(to top, #45e67c, #07c3c4);
  }
}

// 汽泡6
.twui-bubble.xb6 {
  top: calc(72% - 50px);
  left: calc(55% - 50px);
  width: 100px;
  height: 100px;
  font-size: 16px;

  &:before {
    animation-delay: 60ms;
    background: #ffbb72;
    opacity: 0.2;
  }

  > .twui-bubble-inner {
    background-color: #ff554d;
    background-image: linear-gradient(to top, #ffbb72, #ff554d);
  }
}

// 汽泡7
.twui-bubble.xb7 {
  top: 6%;
  left: 35%;
  width: 70px;
  height: 70px;
  font-size: 18px;

  &:before {
    background: #c7e5ff;
  }

  > .twui-bubble-inner {
    background-color: #0392ff;
    background-image: linear-gradient(to top, #57ceff, #0392ff);
  }
}

// 汽泡8
.twui-bubble.xb8 {
  top: 6%;
  right: 15%;
  width: 70px;
  height: 70px;
  font-size: 18px;

  &:before {
    animation-delay: 30ms;
    background: #f9d9db;
  }

  > .twui-bubble-inner {
    background-color: #ff554d;
    background-image: linear-gradient(to top, #ffbb72, #ff554d);
  }
}

// 汽泡9
.twui-bubble.xb9 {
  top: 27%;
  right: 25%;
  width: 110px;
  height: 110px;
  font-size: 24px;

  &:before {
    animation-delay: 60ms;
    background: #c6eafb;
  }

  > .twui-bubble-inner {
    background-color: #00abed;
    background-image: linear-gradient(to top, #37eacc, #00abed);
  }
}

// 汽泡10
.twui-bubble.xb10 {
  top:120px;
  right: 50px;
  width: 70px;
  height: 70px;
  font-size: 18px;

  &:before {
    background: #ded8ff;
  }

  > .twui-bubble-inner {
    background-color: #7851ff;
    background-image: linear-gradient(to top, #ac9cff, #7851ff);
  }
}

// 汽泡11
.twui-bubble.xb11 {
  top: 50%;
  right: 40%;
  width: 90px;
  height: 90px;
  font-size: 22px;

  &:before {
    animation-delay: 30ms;
    background: #e7d9ff;
  }

  > .twui-bubble-inner {
    background-color: #a653fd;
    background-image: linear-gradient(to top, #cc64f9, #a653fd);
  }
}

// 汽泡12
.twui-bubble.xb12 {
  bottom: 8%;
  right: 15%;
  width: 130px;
  height: 130px;
  font-size: 28px;

  &:before {
    animation-delay: 60ms;
    background: #f9e0d2;
  }

  > .twui-bubble-inner {
    background-color: #ff771c;
    background-image: linear-gradient(to top, #ffc629, #ff771c);
  }
}

/* 汽泡内容 */
.twui-bubbleinfo {
  position: relative;
  margin-top: 40px;
  padding: 30px 170px 0 100px;
  border-top: 1px solid #c1cfe7;
}

.twui-bubbleinfo-img {
  position: absolute;
  left: 0;
  top: 30px;
  width: 80px;
  height: 80px;
  border-radius: 5px;
}

.twui-bubbleinfo-body > h4 {
  font-size: 28px;
  font-weight: normal;
}

.twui-bubbleinfo-body > p {
  font-size: 18px;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.twui-bubbleinfo-right {
  position: absolute;
  top: 50px;
  right: 0;
  padding-right: 20px;
}